<template>
  <scale-box class="daping">
    <div class="video-wrap">
      <video class="video" src="./image/background.mp4" autoplay muted loop></video>
    </div>
    <drawer ref="drawer" :visible.sync="drawerShow" title="统计指标配置" @change="onDrawerChange"></drawer>
    <div class="left-sider" @click="_siderClick">
      <img src="./image/index/left-sider-angle.png">
    </div>
    <div class="title">
      <img src="./image/index/back.png" class="back" @click="onBack">
      <span>
        长春市精准预警劝阻态势
        <img class="animate-img" src="./image/index/title-animate.png" >
      </span>
      <div class="date" @click="_removeLocalStorege">{{dateTime}}<i></i><span>{{time}}</span>星期{{weekDay}}</div>
    </div>
    <div class="container" v-if="showContainer">
      <div class="left">
        <component class="left1" :is="option1.component" :title="option1.title" :data="option1.data"></component>
        <component class="left2" :is="option2.component" :title="option2.title" :data="option2.data"></component>
        <component class="left3" :is="option3.component" :title="option3.title" :data="option3.data"></component>
      </div>
      <div class="middle">
        <div class="map">
          <img class="left-img" src="./image/index/border-left.png">
          <chart-map :data="mapData" v-if="mapShow"></chart-map>
          <img class="right-img" src="./image/index/border-right.png">
        </div>
        <chartTable class="bottom-table" title="预警数据" :data="listData" :more-data="moreData" @more-click="getMoreList"
          @more-change="getMoreList" :more-loading="moreLoading" :loading="tableLoading"></chartTable>
      </div>
      <div class="right">
        <component class="right1" :is="option6.component" :title="option6.title" :data="option6.data"></component>
        <component class="right2" :is="option5.component" :title="option5.title" :data="option5.data"></component>
        <component class="right3" :is="option4.component" :title="option4.title" :data="option4.data"></component>
      </div>
    </div>
  </scale-box>
</template>

<script>
  import moment from 'moment'
  import scaleBox from './components/scale-box'
  import card from './components/card'
  import chartTable from './components/table'
  import chartLine from './components/chart-line'
  import chartLineShadow from './components/chart-line-shadow'
  import chartPie from './components/chart-pie'
  import chartRosePie from './components/chart-rose-pie'
  import chartGroupPie from './components/chart-group-pie'
  import chartSpacialGroupPie from './components/chart-spacial-group-pie'
  import chartAroundPie from './components/chart-around-pie'
  import chartMap from './components/map'
  import drawer from './components/drawer'
  import censusCard from './components/census-card'

  import dragOtion from './components/drawer/config/options.js'
  import requestMethods from './methods/index.js'
  import {
    warningList,
    getMapIndicators,
    viewWarningDataDetail
  } from './api/index.js'
  export default {
    name: 'App',
    components: {
      scaleBox,
      card,
      chartTable,
      chartLine,
      chartLineShadow,
      chartPie,
      chartGroupPie,
      chartRosePie,
      chartAroundPie,
      chartMap,
      drawer,
      censusCard,
      chartSpacialGroupPie
    },
    data() {
      return {
        dateTime: moment().format('YYYY-MM-DD'),
        time: moment().format('HH:mm:ss'),
        drawerShow: false,
        option1: {
          title: '',
          component: '',
          data: null
        },
        option2: {
          title: '',
          component: '',
          data: null
        },
        option3: {
          title: '',
          component: '',
          data: null
        },
        option4: {
          title: '',
          component: '',
          data: null
        },
        option5: {
          title: '',
          component: '',
          data: null
        },
        option6: {
          title: '',
          component: '',
          data: null
        },


        listData: [],
        mapData: [],
        mapShow: true,

        moreData: {
          records: [],
          total: 0
        },
        moreSearch: {
          district: '',
          pageNo: 1,
          pageSize: 6
        },
        tableLoading: true,
        moreLoading: true,
        
        
        showContainer: false,
        
        dateTimer: null,
        bottomTimer: null
      }
    },
    mounted() {
      this._setTime()
      setTimeout(() => {
        this.showContainer = true
        this.onInit()
        this.getBottomList()
        this.getMapData()
        this.bottomTimer = setInterval(() => {
          this.getBottomList()
        }, 30000)
      }, 1000)
    },
    beforeDestroy() {
      this._clearTimer()
    },
    computed: {
      weekDay: function() {
        const map = {
          1: '一',
          2: '二',
          3: '三',
          4: '四',
          5: '五',
          6: '六',
          7: '日',
        }
        return map[moment().weekday() + 1];
      }
    },
    methods: {
      _clearTimer() {
        clearInterval(this.dateTimer)
        clearInterval(this.bottomTimer)
      },
      _removeLocalStorege() {
        localStorage.removeItem('dragOtion')
      },
      onBack() {
        this.$router.replace('/')
      },
      _setTime() {
        this.dateTimer = setInterval(() => {
          this.time = moment().format('HH:mm:ss')
        }, 1000)
      },
      _siderClick() {
        this.drawerShow = true
      },
      async onDrawerChange(params) {
        this.showContainer = false
        this.$nextTick(() => {
          this.showContainer = true
          this.onInit()
          this.getBottomList()
          this.getMapData()
        })
      },
      onInit() {
        const option = this.$refs.drawer.getOption()
        const dragOtionCache = localStorage.getItem('dragOtion')
        const dragOtionList = dragOtionCache ? JSON.parse(dragOtionCache) : dragOtion
        const dragMap = {}
        dragOtionList.map(item => {
          dragMap[item.label] = item
        })
        const {
          checkedList
        } = option


        // 基础选中列表
        const checkedMap = {}
        const defaultChecked = []
        checkedList.map(item => {
          checkedMap[item] = item
        })
        dragOtionList.map(item => {
          if (checkedMap[item.label]) {
            defaultChecked.push(item.label)
          }
        })

        // 排除预警、案件列表
        const sortCheckedList = defaultChecked.filter(item => {
          return item !== '预警劝阻概览' && item !== '案件统计'
        })
        // 预警、案件列表
        const cardChecked = defaultChecked.filter(item => {
          return item === '预警劝阻概览' || item === '案件统计'
        })

        if (cardChecked.length > 0) {
          cardChecked.map((item, index) => {
            if (index === 0) {
              sortCheckedList.unshift(item)
            } else {
              sortCheckedList.push(item)
            }
          })
        }
        sortCheckedList.map(async (item, index) => {
          const key = 'option' + (index + 1)
          this[key].title = item
          this[key].component = dragMap[item].component
          const method = requestMethods[item]
          const data = await method(option)
          this[key].data = data
        })
      },

      getMapData() {
        this.mapData = []
        getMapIndicators().then(res => {
          const {
            result
          } = res
          let data = []
          if (result && result.length) {
            result.map(item => {
              item.name = item.area
              item.value = item.totalWarnings
            })
            data = result
          }
          this.$nextTick(() => {
            this.mapData = data
          })

        })
      },
      getBottomList() {
        this.tableLoading = true
        const option = this.$refs.drawer.getOption()
        const params = {
          warningEndTime: option.endDate,
          warningStartTime: option.startDate,
          warningTimeType: option.dateType,
          xzqh: option.xzqh,
        }
        warningList(params).then(res => {
          const result = res.result || []
          if(this.listData.length === 0) {
            this.listData = result
          } else {
            let newList = []
            result.map((item, index) => {
              let newItem = moment(item.warningTime).unix()
              let oldFirst = moment(this.listData[0].warningTime).unix()
              if(newItem > oldFirst) {
                newList.unshift(item)
              }
            })
            for (let i = 0; i < newList.length; i++) {
              setTimeout(() => {
                this.listData.splice(-1, 1)
                this.listData.unshift(newList[i])
              }, (i + 1) * 500)
            }
            
          }
          this.tableLoading = false
        })
      },
      getMoreList(page = 1) {
        this.moreLoading = true
        const option = this.$refs.drawer.getOption()
        const search = {
          warningEndTime: option.endDate,
          warningStartTime: option.startDate,
          warningTimeType: 2//option.dateType,
          // xzqh: option.xzqh
        }
        const params = {
          ...search,
          ...this.moreSearch
        }
        params.pageNo = page

        viewWarningDataDetail(params).then(res => {
          const {
            result
          } = res
          this.moreData = result
          this.moreLoading = false
        })
      }
    }
  }
</script>
<style type="text/css">
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }

  @keyframes fadeToLeft {
    0% {
      opacity: 0;
      transform: translateX(50%);
    }

    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes fadeToRight {
    0% {
      opacity: 0;
      transform: translateX(-50%);
    }

    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .left-img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    animation: fadeToLeft 1s 2;
    pointer-events: none;
  }

  .right-img {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    animation: fadeToRight 1s 2;
    pointer-events: none;
  }
</style>
<style lang="less" scoped>
  @font-face {
    font-family: 'pang';
    src: url(font/PangMenZhengDaoBiaoTiTi-1.ttf);
  }
  @keyframes opacity{
     0%{opacity:0}
     100%{opacity: 1;}
  }
  @keyframes imgMove{
     0%{left: -45%;}
     50%{left: 50%;}
     100%{left: -45%;}
  }
  @keyframes leftMove{
     0%{margin-left: -120%;}
     100%{margin-left: 0;}
  }
  @keyframes rightMove{
     0%{margin-left: 120%;}
     100%{margin-left: 0;}
  }
  .daping {
    overflow: hidden;
    font-family: 'pang';
    display: flex;
    flex-flow: column;
    min-width: 1200px;
    min-height: 600px;
    

    .video-wrap {
      width: 100%;

      position: absolute;

      // padding-bottom: 56.25%;
      /*9除以16*/

      height: 100vh;

      .video {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        // z-index: 9999;
        object-fit: fill;
      }
    }


    .left-sider {
      width: 30px;
      height: 450px;
      position: fixed;
      left: 0;
      top: calc(50% - 225px);
      display: flex;
      justify-content: center;
      align-items: center;
      background-image: url(image/index/left-sider.png);
      background-size: 100% 100%;
      cursor: pointer;
      z-index: 8;
    }

    .title {
      animation: 5s opacity 0s linear;
      height: 80px;
      line-height: 80px;
      background-image: url(image/index/title.png);
      background-size: 100% 100%;
      color: #FFFFFF;
      display: flex;
      justify-content: space-between;
      padding: 0 60px;
      padding-left: 40px;
      z-index: 9;
      
      .back {
        width: 32px;
        height: 32px;
        margin-top: 6px;
        cursor: pointer;
      }

      >span {
        font-size: 36px;
        background: linear-gradient(0deg, #B2CCFC 0%, #FFFFFF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-left: 245px;
        position: relative;
        font-style: 'SourceHanSansCN-Bold';
        .animate-img{
          animation: 6s imgMove 0s infinite;
          position: absolute;
          bottom: -38%;
          width: 100%;
          left: 0;
        }
      }

      >div {
        display: flex;
        align-items: center;
        font-size: 18px;

        i {
          display: block;
          width: 1px;
          height: 22px;
          background: linear-gradient(0deg, #000, #fff, #000);
          margin: 0 23px;
        }
      }

      .date {
        height: 60%;
        span {
          display: block;
          width: 95px;
        }
      }
    }

    .container {
      animation: 5s opacity 0s linear;
      position: relative;
      flex: 1;
      padding: 40px;
      padding-bottom: 22px;
      display: flex;
      flex-flow: row;

      .left,
      .right {
        // min-width: 380px;
        width: 22.92%;
        min-height: 100%;
        display: flex;
        flex-flow: column;
        justify-content: space-between;

        >div {
          height: 27.4vh !important;
          // min-height: 240px!important;
        }
      }

      .middle {
        flex: 1;
        margin: 0 30px;
        display: flex;
        flex-flow: column;
        justify-content: space-between;

        .bottom-table {
          height: 296px !important;
          height: 27.4vh !important;
        }

        .map {
          flex: 1;
          position: relative;

        }
      }
    
      .left{
        .left1{
          animation: 1s leftMove linear;
        }
        .left2{
          animation: 1.5s leftMove linear;
        }
        .left3{
          animation: 2s leftMove linear;
        }
      }
      .right{
        .right1{
          animation: 1s rightMove linear;
        }
        .right2{
          animation: 1.5s rightMove linear;
        }
        .right3{
          animation: 2s rightMove linear;
        }
      }
    }
  }
</style>
